<template>
  <div class="detailss">
    <!-- 详情头部 -->
    <div class="detailHeader">
      <span class="fa fa-angle-left" @click="xqRet"></span>
      <span>详情</span>
    </div>
    <!-- 详情内容++++++++++++++++++++++++++++++++++++++++++++====== -->
    <!-- 作者 -->
    <div class="xabottom">
      <div v-if="xqlist.author!=null">
        <div class="xqAuthHea" v-if="xqlist.author != null">
          <p v-if="xqlist.author.cover == '' ">
            <img src="../../../build/perHeaderBla.svg" alt>
          </p>
          <p v-else>
            <img :src="xqlist.author.cover">
          </p>
          <p class="xqAutNam" v-text="xqlist.author.name"></p>
          <p class="fa fa-angle-down" @click="xqCopy"></p>
        </div>
        
        <!-- 判断是否是订阅 ++++++++++++++++++++++++++++++++++++++++++++++++++ -->
        <div class="xqAuthHea" v-else-if="xqlist.reference != null">
          <!-- 图片 -->
          <p>
            <img style="border:1px solid black;" :src="xqlist.reference.cover">
          </p>
          <!-- 作家 -->
          <p class="xqAutNam" v-text="xqlist.reference.name"></p>
          <p class="fa fa-angle-down" @click="xqCopy"></p>
        </div>
        <!--判断是否原创 +++++++++++++++++++++++++++++++++++++++ -->
        <div class="xqAuthHea" v-else>
          <!-- 图片 -->
          <p v-if="xqlist.user.avatar == '' ">
            <img src="../../../build/perHeaderBla.svg" alt>
          </p>
          <p v-else>
            <img style="border:1px solid black;" :src="xqlist.user.avatar">
          </p>
          <!-- 作家 -->
          <p class="xqAutNam" v-text="xqlist.user.nickname"></p>
          <p class="fa fa-angle-down" @click="xqCopy"></p>
        </div>
      </div>
    </div>
    <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
    <!-- 内容 图片 -->
    <div class="xqAutNav">
      <p v-text="xqlist.content"></p>
      <img v-if="xqlist.image != null " :src="xqlist.image.url" alt>
    </div>
    <!-- 发表者 -->
    <div v-if="xqlist.user!= null" class="xqPublish">
      <router-link :to="'/userXQ/'+ xqlist.user.uid">
        <img :src="xqlist.user.avatar" alt>
        <p v-text="xqlist.user.nickname"></p>
        <p>
          <span v-text="xqlist.daily_date"></span>
          <span></span>
        </p>
      </router-link>
    </div>
    <!-- 作者 底部 点赞 -->
    <div class="xqFoot">
      <p>
        <span class="fa fa-heart-o"></span>
        <span style="font-size:3vw;" v-text="xqlist.like_count"></span>
      </p>
      <p>
        <span class="fa fa-commenting-o"></span>
        <span style="font-size:3vw;" v-text="xqlist.comment_count"></span>
      </p>
      <p class="fa fa-bookmark-o"></p>
      <p class="fa fa-share-square-o"></p>
    </div>
    <!-- 标签 -->
    <div v-if="xqlist.tags != ''" v-for="(xqlistInfo,a) in xqlist.tags" :key="a" class="xqsign">
      <p v-text="xqlistInfo.name"></p>
    </div>
    <!-- 热门评论 -->
    <div class="xqHotEva" v-for="(xqev,index) in xqEvaList" :key="index" v-if="xqEvaList != null">
      <p>热门评论</p>
      <hr>
      <div class="xqEvaluea">
        <div class="xqEvalue">
          <router-link :to="'/userXQ/'+ xqev.user.uid" style="dispaly:flex;">
            <img :src="xqev.user.avatar" alt>
            <p v-text="xqev.user.nickname"></p>
          </router-link>
          <p class="singNum">
            <span v-text="xqev.up_count"></span>
            <span class="fa fa-thumbs-o-up"></span>
          </p>
        </div>
        <p @click="xqTextTan" class="xqEvaNav" v-text="xqev.content"></p>
      </div>
    </div>
    <!-- 最新评论 -->
    <div class="newEva">
      <p>最新评论</p>
      <hr>
      <div class="xqEvaluea" v-for="(xqnew,n) in xqnewList" :key="n">
        <div class="xqEvalue">
          <router-link :to="'/userXQ/'+ xqnew.user.uid" style="dispaly:flex;">
            <img :src="xqnew.user.avatar" alt>
            <p v-text="xqnew.user.nickname"></p>
          </router-link>
          <p class="singNum">
            <span v-text="xqnew.up_count"></span>
            <span class="fa fa-thumbs-o-up"></span>
          </p>
        </div>
        <p @click="xqTextTan" class="xqEvaNav" v-text="xqnew.content"></p>
      </div>
    </div>
    <popup
      :show-mask="false"
      v-model="isShow"
      position="bottom"
      :popup-style="{zIndex:999}"
      class="copyShow"
      height="30vw"
    >
      <p @click="xqcopyText">复制文字</p>
      <p @click="xqcancel">取消</p>
    </popup>
    <popup
      :show-mask="false"
      v-model="iSShow"
      position="bottom"
      :popup-style="{zIndex:999}"
      class="copyShow"
      height="30vw"
    >
      <p @click="xqcopyText1">复制</p>
      <p @click="xqres">回复</p>
      <p @click="xqjubao">举报</p>
      <p @click="xqhuihua">查看会话</p>
      <p @click="xqcancel2">取消</p>
    </popup>
  </div>
</template>
<script>
import { Popup } from "vux";
export default {
  data() {
    return {
      xqlist: [],
      isShow: false,
      xqEvaList: [],
      iSShow: false,
      xqnewList: []
    };
  },
  props: ["xqid"],
  mounted() {
    this.getxqMessage();
    this.getxqEvaList();
    this.getxqnewEva();
  },
  methods: {
    getxqMessage: function() {
      var _this = this;
      this.$http
        .get(
          "/judou/api/v6/op/sentences/" +
            this.xqid +
            "?token=e16afc7de3b96260de24eb41b22f9879&timestamp=1545441205&app_key=2a438661-92c0-4a2d-b32e-3fd0c47a0a3c&platform=android&channel=ch_xiaomi&version_code=484&version=v3.7.2&system_version=27&device_type=MI%208&device_id=d317466bdcb13faa&signature=58165e79783b23ff34311545e46ee105"
        )
        .then(function(value) {
          _this.xqlist = value.body;
          // console.log(_this.xqlist);
        });
    },
    getxqEvaList: function() {
      var _this = this;
      this.$http
        .get(
          "judou/api/v6/op/sentences/" +
            this.xqid +
            "/comments/hot?page=1&per_page=20&token=e16afc7de3b96260de24eb41b22f9879&timestamp=1545441419&app_key=2a438661-92c0-4a2d-b32e-3fd0c47a0a3c&platform=android&channel=ch_xiaomi&version_code=484&version=v3.7.2&system_version=27&device_type=MI%208&device_id=d317466bdcb13faa&signature=0ea7eb6dca0e2ad1fe0a26d8c365ae54"
        )
        .then(function(value) {
          // console.log(value)
          _this.xqEvaList = value.body.data;
          console.log(_this.xqEvaList);
        });
    },
    getxqnewEva: function() {
      var _this = this;
      this.$http
        .get(
          "judou/api/v6/op/sentences/" +
            this.xqid +
            "/comments/latest?page=1&per_page=20&token=e16afc7de3b96260de24eb41b22f9879&timestamp=1545441419&app_key=2a438661-92c0-4a2d-b32e-3fd0c47a0a3c&platform=android&channel=ch_xiaomi&version_code=484&version=v3.7.2&system_version=27&device_type=MI%208&device_id=d317466bdcb13faa&signature=0ea7eb6dca0e2ad1fe0a26d8c365ae54"
        )
        .then(function(value) {
          _this.xqnewList = value.body.data;
          // console.log(_this.xqnewList)
        });
    },
    xqRet: function() {
      window.history.back(-1);
      $(".weui-tabbar").show();
    },
    xqCopy: function() {
      console.log(123);
      this.isShow = !this.isShow;
    },
    xqcopyText: function() {
      this.isShow = false;
      alert("复制成功");
    },
    xqcancel: function() {
      this.isShow = false;
    },
    xqTextTan: function() {
      this.iSShow = !this.iSShow;
    },
    xqres: function() {
      alert("回复");
      this.iSShow = false;
    },
    xqjubao: function() {
      alert("确定举报吗？");
      this.iSShow = false;
    },
    xqhuihua: function() {
      alert("查看会话");
      this.iSShow = false;
    },
    xqcopyText1: function() {
      alert("已复制");
      this.iSShow = false;
    },
    xqcancel2: function() {
      this.iSShow = false;
    }
  },
  components: {
    Popup
  }
};
</script>
<style scoped>
a:-webkit-any-link {
  text-decoration: none;
  color: black;
  display: flex;
}
.detailss {
  width: 99vw;
  /* height: 150vw; */
  /* border: 2px solid black; */
}
.detailHeader {
  width: 90vw;
  height: 10vw;
  border-bottom: 1px solid rgb(240, 239, 239);
  /* border: 2px solid black; */
  padding: 2vw;
  position: fixed;
  margin: -15vw 3vw;
  background-color: white;
  z-index: 1000;
}
.xabottom {
  margin-top: 15vw;
}
.detailHeader span:nth-child(1) {
  font-size: 6vw;
  font-weight: bold;
}
.detailHeader span:nth-child(2) {
  margin-left: 35vw;
  font-size: 5vw;
}
.xqAuthHea {
  width: 90vw;
  /* border: 1px solid blue; */
  padding: 2vw;
  margin: 0 auto;
  display: flex;
}
.xqAuthHea img {
  width: 15vw;
  height: 15vw;
  border: 1px solid rgb(247, 243, 243);
  background-color: rgb(247, 243, 243);
  border-radius: 2vw;
}
.xqAutNam {
  font-size: 4vw;
  margin-top: 6vw;
}
.fa-angle-down {
  position: absolute;
  right: 5vw;
  top: 20vw;
}
.xqAutNav {
  width: 90vw;
  margin: 0 auto;
  /* border: 1px solid black; */
  font-size: 4vw;
  padding: 2vw;
}
.xqAutNav img {
  width: 100%;
  height: 50vw;
  border-radius: 2vw;
}
.xqPublish {
  width: 90vw;
  margin: 0 auto;
  border-bottom: 1px solid rgb(216, 211, 211);
  font-size: 3vw;
  padding: 2vw;
  display: flex;
  line-height: 13vw;
}
.xqPublish img {
  width: 12vw;
  height: 12vw;
  border-radius: 50vw;
}
.xqPublish p {
  margin-left: 3vw;
}
.xqFoot {
  width: 90vw;
  margin: 0 auto;
  padding: 2vw;
  display: flex;
  justify-content: space-around;
  font-size: 5vw;
  font-weight: bold;
  line-height: 3vw;
  color: rgb(230, 219, 219);
  /* border-bottom: 3vw solid rgb(233, 229, 229); */
}
.xqsign {
  width: 98vw;
  height: 15vw;
  border-top: 3vw solid rgb(233, 229, 229);
  border-bottom: 3vw solid rgb(233, 229, 229);
}
.xqsign p {
  width: 15vw;
  height: 8vw;
  border: 1px solid rgb(168, 163, 163);
  padding: 1vw;
  font-size: 4vw;
  margin: 4vw 4vw;
  text-align: center;
  vertical-align: middle;
  border-radius: 5vw;
  color: rgb(168, 163, 163);
}
.xqHotEva {
  width: 90vw;
  margin: 0 auto;
  padding: 3vw;
  line-height: 5vw;
}
.xqHotEva > p {
  padding: 0 0 5% 0;
}
.newEva {
  width: 90vw;
  margin: 0 auto;
  padding: 3vw;
}
.newEva > p {
  padding: 0 0 5% 0;
}
.xqEvaluea {
  width: 90vw;
  border-bottom: 2.5vw solid rgb(239, 239, 241);
  margin: 3% auto;
  padding-bottom: 15vw;
}
.xqEvalue {
  width: 90vw;
  display: flex;
  /* border: 1px solid black; */
  line-height: 20vw;
  font-size: 4vw;
}
.xqEvalue img {
  width: 15vw;
  height: 15vw;
  border-radius: 50%;
  margin-top: 3%;
}
/* .xqEvalue > p:nth-child(2) {
  margin-left: 5vw;
}
.xqEvalue > p:nth-child(3) {
  position: absolute;
  right: 6vw;
  color:blue;
} */
.singNum {
  position: absolute;
  right: 4%;
}
.xqEvaNav {
  width: 100%;
  font-size: 4vw;
}
</style>
